<template>
  <el-form  ref="exampleForm" size="large" :rules="rules" :model="form">
        <el-form-item  prop="exampleNo">
        </el-form-item>
        <el-form-item label="用例名" prop="exampleName">
          <el-input  v-model="form.exampleName"></el-input>
        </el-form-item>
        <el-form-item label="父级" prop="exampleModel">
          <el-select @change="checkModel" v-model="form.exampleModel">
            <el-option v-for="item in example" :label="item.exampleName" :key="item.exampleNo" :value="item.exampleNo"/>
          </el-select>
        </el-form-item>
        <el-form-item label="描述" prop="exampleInfo">
          <el-input  v-model="form.exampleInfo"></el-input>
        </el-form-item>
        <el-form-item label="请求方式" prop="exampleMethod">
          <el-select v-model="form.exampleMethod">
            <el-option  label="get" key="get" value="get"/>
            <el-option  label="post" key="post" value="post"/>
            <el-option  label="put" key="put" value="put"/>
            <el-option  label="remove" key="remove" value="remove"/>
          </el-select>
        </el-form-item>
        <el-form-item label="请求参数" prop="exampleRequest">
          <el-input  v-model="form.exampleRequest"></el-input>
        </el-form-item>
        <el-form-item label="请求头" prop="exampleHead">
          <el-input  v-model="form.exampleHead"></el-input>
        </el-form-item>
        <el-form-item label="返回值" prop="exampleResponse">
          <el-input  v-model="form.exampleResponse"></el-input>
        </el-form-item>
        <el-form-item label="验证函数" prop="exampleVerify">
          <el-input  v-model="form.exampleVerify"></el-input>
        </el-form-item>
        <el-form-item label="请求地址" prop="exampleUrl">
          <el-input  v-model="form.exampleUrl"></el-input>
        </el-form-item>
        <el-form-item label="相关链接" prop="exampleLink">
          <el-input  v-model="form.exampleLink"></el-input>
        </el-form-item>
<!--        <el-form-item label="异常信息" prop="exampleError">-->
<!--          <el-input  v-model="form.exampleError"></el-input>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="测试结果" prop="exampleResult">-->
<!--          <el-input  v-model="form.exampleResult"></el-input>-->
<!--        </el-form-item>-->
        <el-form-item label="索引" prop="exampleIndex">
          <el-input-number  v-model="form.exampleIndex"></el-input-number>

        </el-form-item>
        <el-form-item label="类型" prop="exampleType">
          <el-select v-model="form.exampleType">
            <el-option  label="模块" key="1" value="1"/>
            <el-option  label="接口" key="2" value="2"/>
            <el-option  label="用例" key="3" value="3"/>
          </el-select>
        </el-form-item>
    <el-row  justify="center">
      <el-col :span="3"><el-button type="primary" @click="submitForm($refs.exampleForm)">保存</el-button></el-col>
      <el-col :span="3"><el-button @click="closeForm">关闭</el-button></el-col>
    </el-row>
  </el-form>
</template>
<script setup>
import {onMounted, onServerPrefetch, onUpdated, reactive, ref} from "vue";
import {addExample, editExample, getAllExample, getExample} from '../../request/ExampleApi.js'
import {ElMessage, ElNotification} from "element-plus";
import axios from "axios";
const insert=ref(true)
const form =reactive({
        exampleNo:'',
        exampleName:'',
        exampleModel:'',
        exampleInfo:'',
        exampleMethod:'',
        exampleRequest:'',
        exampleResponse:'',
        exampleVerify:'',
        exampleUrl:'',
        exampleLink:'',
        exampleError:'',
        exampleResult:'',
        exampleIndex:'',
        exampleType:'',
  exampleHead:""
})
const checkModel=(data)=>{
  for(let i=0;i<example.value.length;i++){
    if(example.value[i].exampleNo==data){
      let item=example.value[i]
      if(form.exampleName!=''){
        form.exampleName=item.exampleName
      }
      if(form.exampleInfo!=''){
        form.exampleInfo=item.exampleInfo
      }
      if(form.exampleMethod!=''){
        form.exampleMethod=item.exampleMethod
      }
      if(form.exampleRequest!=''){
        form.exampleRequest=item.exampleRequest
      }
      if(form.exampleResponse!=''){
        form.exampleResponse=item.exampleResponse
      }
      if(form.exampleUrl!=''){
        form.exampleUrl=item.exampleUrl
      }
      if(form.exampleLink!=''){
        form.exampleLink=item.exampleLink
      }
      if(form.exampleVerify!=''){
        form.exampleVerify=item.exampleVerify
      }
      if(form.exampleIndex!=''){
        form.exampleIndex=item.exampleIndex
      }
      if(form.exampleType!=''){
        form.exampleType=item.exampleType
      }
      if(form.exampleHead!=''){
        form.exampleHead=item.exampleHead
      }

      break;
    }
  }
}
const example=ref([])
const rest=(isInsert)=>{
  insert.value=isInsert
    exampleForm.value.resetFields()
}
const exampleForm=ref()
const fillForm=(row)=>{
  console.log(row)
  rest(false)
  form.exampleHead=row.exampleHead
    form.exampleNo= row.exampleNo
    form.exampleName= row.exampleName
    form.exampleModel= row.exampleModel
    form.exampleInfo= row.exampleInfo
    form.exampleMethod= row.exampleMethod
    form.exampleRequest= row.exampleRequest
    form.exampleResponse= row.exampleResponse
    form.exampleVerify= row.exampleVerify
    form.exampleUrl= row.exampleUrl
    form.exampleLink= row.exampleLink
    form.exampleError= row.exampleError
    form.exampleResult= row.exampleResult
    form.exampleIndex= row.exampleIndex
    form.exampleType= row.exampleType
}

const emits = defineEmits(['closeExampleForm','submitExampleForm']);
const closeForm=()=>{
    emits("closeExampleForm")
}
const rules=reactive({
})

const submitForm = async (formEl) => {
  if (!formEl) return

  await formEl.validate((valid, fields) => {
    if (valid) {
      if(insert.value){
        addExample(form).then((response)=>{
          if(response.state=="200"){
            ElMessage.success("新增成功")
            getExample().then((response)=>{
              example.value=response.data
            })
            emits("submitExampleForm")
          }
        })
      }else {
        editExample(form).then((response)=>{
          if(response.state=="200"){
            ElMessage.success("修改成功")
            emits("submitExampleForm")
          }
        })
      }
    } else {
      console.log('error submit!', fields)
    }
  })
}
defineExpose({ rest,fillForm })
onMounted(()=>{
  getExample().then((response)=>{
    example.value=response.data
  })
})
</script>
<style scoped>

</style>
